<html>
  <head>
    <script type="application/javascript">
      function draw() {
        var ctx = document.getElementById("canvas").getContext("2d");
        // 画背景
        ctx.fillStyle = "#FD0";
        ctx.fillRect(0, 0, 75, 75);
        ctx.fillStyle = "#6C0";
        ctx.fillRect(75, 0, 75, 75);
        ctx.fillStyle = "#09F";
        ctx.fillRect(0, 75, 75, 75);
        ctx.fillStyle = "#F30";
        ctx.fillRect(75, 75, 75, 75);
        ctx.fillStyle = "#FFF";

        // 设置透明度值
        ctx.globalAlpha = 0.2;

        // 画半透明圆
        for (var i = 0; i < 7; i++) {
          ctx.beginPath();
          ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
          ctx.fill();
        }
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>
